$co-m-horizontal-nav__menu-item-link-padding-lr: $pf-global-gutter;

.co-m-horizontal-nav__menu {
  border-bottom: 1px solid $color-grey-background-border;
  display: flex;
  flex-shrink: 0; // prevent collapse of tabs
  list-style: none;
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  @media (min-width: $pf-global--breakpoint--xl) {
    padding-left: ($pf-global-gutter--md - $pf-global-gutter);
  }
  &--within-sidebar {
    border-top: 1px solid $color-grey-background-border;
    margin-bottom: $pf-global-gutter--md !important;
    margin-left: -$pf-global-gutter;
    margin-right: -$pf-global-gutter;
    overflow: visible; // so focus indicator is not clipped since these don't need to scroll
    @media (min-width: $pf-global--breakpoint--xl) {
      margin-left: -$pf-global-gutter--md;
      margin-right: -$pf-global-gutter--md;
    }
    .co-m-horizontal-nav__menu-item {
      font-size: 16px;
      line-height: normal;
    }
  }
  &--within-overview-sidebar {
    margin-left: 0;
    margin-right: 0;
    padding-left: 5px;
  }
}

.co-m-horizontal-nav__menu-item {
  font-size: 18px;
  a,
  button {
    background: transparent;
    border: 0;
    color: $pf-color-black-700;
    display: block;
    padding: 6px $co-m-horizontal-nav__menu-item-link-padding-lr 8px;
    position: relative;
    text-decoration: none;
    &:hover,
    &:focus {
      color: #252525;
      text-decoration: none;
      &::after {
        background: $pf-color-black-400;
      }
    }
    &::after {
      bottom: 0;
      content: "";
      display: block;
      height: 2px;
      left: $co-m-horizontal-nav__menu-item-link-padding-lr;
      position: absolute;
      right: $co-m-horizontal-nav__menu-item-link-padding-lr;
    }
  }
  &.co-m-horizontal-nav-item--active {
    a,
    button {
      color: var(--pf-global--link--Color);
      &::after {
        background: var(--pf-global--link--Color);
      }
    }
  }
  &:last-child {
    @media (min-width: $pf-global--breakpoint--md) {
      a,
      button {
        margin-right: $co-m-horizontal-nav__menu-item-link-padding-lr;
      }
    }
  }
}
